<template>
<view>
  <view class="container">
    <view class="box_div">
		<view class="title">云机配置</view>
		<view class="config_nav">
			<view class="one_nav">
				<view class="tit1">安卓10</view>
				<view class="tit2">系统</view>
			</view>
			<view class="one_nav">
				<view class="tit1">8G</view>
				<view class="tit2">运行内存</view>
			</view>
			<view class="one_nav">
				<view class="tit1">8核</view>
				<view class="tit2">处理器</view>
			</view>
			<view class="one_nav">
				<view class="tit1">128G</view>
				<view class="tit2">容量</view>
			</view>
		</view>
		<view style="height: 16rpx;"></view>
	</view>
	
	<view style="height: 22rpx;"></view>
	<view class="box_div">
		<view class="item_box">
			<view  v-for="(item,index) in itemData" :key="index" :class="[item.has_choose == 1 ? 'item_one active' : 'item_one']" @click="chooseOne(item.id)">
				<view class="left">
					<view class="item_title">{{item.name}}</view>
					<view style="margin-top: 15rpx;"><text class="tehui">{{item.tip}}</text></view>
				</view>
				<view class="right">
					<view><text style="font-size: 28rpx;">¥</text>{{item.money}}</view>	
					<view class="tip" v-if="item.type == 1">{{item.avg_money}}元/小时</view>
					<view class="tip" v-if="item.type == 2">{{item.avg_money}}元/天</view>
				</view>
			</view>
			
		
		</view>
	</view>
    <view style="height: 320rpx;"></view>
  </view>
  
  <view class="bottom_box">
	  <view style="padding: 40rpx 50rpx;">
		  <view style="display: flex;justify-content: space-between;align-items: center;font-size: 32rpx;">
		  		  <view style="display: flex;align-items: center;">
					  <text>数量：</text>
					  <view><u-number-box v-model="num" @change="valChange"></u-number-box></view>
				  </view>
			
		  		  <view>合计：<text style="font-size: 28rpx;color:#746ef6;">¥</text><text style="color:#746ef6;font-size: 44rpx;">{{money}}</text></view>
		  </view>
		  <view style="width: 90%;margin-left: 5%;margin-top: 24rpx;">
		  		  <u-button text="确认续费" color="#746ef6"  @click="surePayFunc()" shape='circle' :loading="isSaving" size='large'></u-button>
		  </view>
	  </view>
	  
  </view>
</view>
</template>

<script>

import { getPackageItem } from '@/api/package.js';
import { apiXufeiOrder,apiCloseOrder} from "@/api/order.js";

import baseUrl from '@/utils/siteInfo.js';
export default {
  components: {
		
   },
  data() {
    return {
	  itemData:[],
	  chooseItem:{},
	  isUserLogin:false,
	  isSaving:false,
	  num:1,
	  money:0,
	  order_id:0,
	  package_id:0
    }
  },
  computed:{

  },
  onLoad(options) {
	this.order_id = options.order_id;
	this.package_id = options.package_id;
  },
  onShow(){
	 this.getPackageItemFunc();

  },
  methods: {
    getPackageItemFunc(){
		getPackageItem({package_id:this.package_id}).then(res=>{
			if(res.code == 0){
				this.itemData = res.data;
				var one = {};
				res.data.forEach(function(item){
					if(item.has_choose == 1){
						one = item;
					}
				})
				this.chooseItem = one;
				this.money = one.money;
			}
		})
	},
	valChange(e) {
		var num = e.value;
		var money = parseFloat(this.chooseItem.money);
		this.money = parseFloat(num*money).toFixed(2);
		console.log('当前值为: ' + e.value)
	},
	chooseOne(id){
		var one = {};
		this.itemData = this.itemData.map(item=>{
		    if(item.id == id){
		    	item.has_choose = 1;
				one = item;
		    	return item;
		    }else{
				item.has_choose = -1;
				 return item;
			}
		   
		});
		this.num = 1;
		this.chooseItem = one;
		this.money = one.money;
	},
	makeCall(){
		uni.makePhoneCall({
			phoneNumber:this.sysData.kefu_phone
		})
	},
	surePayFunc(){
		uni.showLoading({
			title:"提交订单中"
		});
		var that = this;
		var params = {num:this.num,item_id:this.chooseItem.id,order_id:this.order_id};
		apiXufeiOrder(params).then(res=>{
			uni.hideLoading();
			if(res.code != 0){
				uni.$u.toast(res.msg);
				return '';
			}
			
			var reData = res.data;
			if(reData.pay_status == 0){
				uni.$u.toast("0元支付成功")
				uni.navigateTo({
					url:"/pages/my/order/index"
				})
			}else{
				var order_no = reData.order_no;
				uni.requestPayment({
					provider: 'wxpay', //支付类型-固定值
					timeStamp: reData.timeStamp, // 时间戳（单位：秒）
					nonceStr: reData.nonceStr, // 随机字符串
					package: reData.package, // 固定值
					signType: reData.signType, //固定值
					paySign: reData.paySign, //签名
					success: function(res_pay) {
						console.log(res_pay,'？？？？？？')
						uni.$u.toast("支付成功")
						
						//跳转
						uni.navigateTo({
							url:"/pages/my/order/index"
						})
					},
					fail(res_pay) {
						if (err.errMsg == 'requestPayment:fail cancel') {
							uni.showToast({
								title: '取消支付',
								icon: 'error'
							})
							that.closeOrderFunc(order_no);
						} else {
							uni.showToast({
								title: '支付异常,请稍后再试',
								icon: 'error'
							})
							that.closeOrderFunc(order_no);
						}
					}
				})
			}// end else
		})//apiCreateOrder end 
	},
	closeOrderFunc(order_no){
		apiCloseOrder({order_no:order_no}).then(res=>{
			
		})
	}
  }
}
</script>

<style>
page{

  font-family: "Roboto", Sans-serif;
  background: #f6f6f6;
  padding: 20rpx 36rpx;
}
.box_div{
	border-radius: 24rpx;
	padding: 28rpx;
	background-color: #fff;
}
.box_div .title{
	font-size: 36rpx;
	font-weight: 600;
	margin-top: 15rpx;
	margin-bottom: 20rpx;
}
.config_nav{
	display: flex;
	align-items: center;
	margin-top: 30rpx;
}
.config_nav .one_nav{
	width: 25%;
	text-align: center;
}
.config_nav .one_nav .tit1{
	font-size: 32rpx;
}
.config_nav .one_nav .tit2{
	margin-top: 10rpx;
	font-size: 30rpx;
	color: #a2a2a2;
}
.item_box{
	
}
.item_one{
	padding: 30rpx;
	border-radius: 14rpx;
	background-color: #f6f6f6;
	margin-bottom: 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.item_one:last-of-type{
	margin-bottom: 0rpx;
}
.item_one .left{
	width: 60%;
}

.item_one .right{
	width: 38%;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	color: #746ef6;
	font-size: 42rpx;
	font-weight: 600;
	border-left: 1rpx solid #d5d5d5;
}
.item_one .right .tip{
	color: #767676;
	font-size: 24rpx;
	font-weight: 400;
}
.tehui{
	font-size: 28rpx;
	background-color: #746ef6;
	padding: 6rpx 24rpx;
	color: #fff;
	border-radius: 16rpx;
}
.item_title{
	font-weight: 600;
	font-size: 36rpx;
}
.item_box .active{
	background-color: #dedcff;
	border: 1rpx solid #746ef6;
}
.bottom_box{
	position: fixed;
	bottom: 0rpx;
	left: 0;
	width: 100%;
	background-color: #fff;
}
</style>
